import { createSlice } from "@reduxjs/toolkit";

/**
 * 从本地存储中加载购物车状态
 * @returns {Object} 购物车状态对象，包含cartItems（购物车项数组）和totalQuantity（总数量）
 */
const loadState = () => {
  try {
    // 从本地存储中获取购物车的序列化状态
    const serializedState = localStorage.getItem("cart");
    // 如果没有找到购物车的序列化状态，返回默认的购物车状态
    if (serializedState === null) {
      return { cartItems: [], totalQuantity: 0 };
    }
    // 解析找到的序列化状态并返回
    return JSON.parse(serializedState);
  } catch (err) {
    // 如果解析过程中出现错误，返回默认的购物车状态
    return { cartItems: [], totalQuantity: 0 };
  }
};
/**
 * 将给定的状态保存到本地存储中，键名为 "cart"。
 * @param {Object} state - 要保存的状态对象。
 */
const saveState = (state) => {
  try {
    // 将状态对象序列化为JSON字符串
    const serializedState = JSON.stringify(state);
    // 使用键名 "cart" 将序列化的状态存储到本地存储中
    localStorage.setItem("cart", serializedState);
  } catch (err) {
    // 忽略写入错误
  }
};

const initialState = loadState();

// 创建一个购物车管理切片，包括向购物车添加商品、从购物车移除商品和清空购物车的功能
const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    // 向购物车添加商品
    // 参数: state - 当前状态, action - 正在执行的动作，包含要添加的商品信息
    addItemToCart(state, action) {
      // 从动作负载中解构商品信息
      const { id, name, price, image, quantity } = action.payload;
      // 将数量转换为整数，默认为1（如果转换失败）
      const itemQuantity = parseInt(quantity, 10) || 1;
      // 将价格转换为浮点数，默认为0（如果转换失败）
      const itemPrice = parseFloat(price) || 0;

      // 将每个商品作为单独的条目添加
      state.cartItems.push({
        // 生成唯一的ID，以便区分同一商品的不同添加时间
        id: id + "_" + new Date().getTime(),
        productId: id,
        name,
        price: itemPrice,
        image,
        quantity: itemQuantity,
      });

      // 更新购物车中的商品总数
      state.totalQuantity = state.cartItems.length;

      // 保存当前状态
      saveState(state);
    },

    // 从购物车移除商品
    // 参数: state - 当前状态, action - 正在执行的动作，包含要移除的商品ID
    removeItemFromCart(state, action) {
      // 从动作负载中解构商品ID
      const { id } = action.payload;
      // 过滤掉要移除的商品
      state.cartItems = state.cartItems.filter((item) => item.id !== id);
      // 更新购物车中的商品总数
      state.totalQuantity = state.cartItems.length;

      // 保存当前状态
      saveState(state);
    },

    // 清空购物车
    // 参数: state - 当前状态
    clearCart(state) {
      // 清空购物车中的所有商品
      state.cartItems = [];
      // 将购物车中的商品总数重置为0
      state.totalQuantity = 0;

      // 保存当前状态
      saveState(state);
    },
  },
});

export const { addItemToCart, removeItemFromCart, clearCart } =
  cartSlice.actions;

export default cartSlice.reducer;
